<template>
<div>

    <card v-for="(course, index) in courses" :key="index" :header="{title: course.title + ' ( ' + course.price + '元 )'}" style="margin-top:0px; margin-bottom:10px;">
      <div slot="content" class="card-padding">
        <div>
          <img :src="course.thumb + '?x-oss-process=image/resize,w_200'" width="100%">
        </div>
      </div>
      <div slot="footer" style="text-align:center;padding:10px;line-height:30px;border-top: 1px #eee solid;">
        <div @click="signup(course)">我要报名</div>
      </div>
    </card>

    <div v-transfer-dom>
      <popup v-model="show" height="300px" is-transparent>
        <div style="width: 95%;background-color:#fff;height:290px;margin:0 auto;border-radius:5px;padding-top:6px;">
         <group>
					<cell title="当前课程" :value="form.title"></cell>
					<x-input title="姓名" placeholder="输入真实姓名" v-model="form.name"></x-input>
					<x-input title="电话" placeholder="输入电话" v-model="form.tel"></x-input>
         </group>
         <div style="padding:20px 15px;">
          <x-button type="primary" @click.native="signupCourse" :disabled="unable">提交报名</x-button>
          <x-button @click.native="show = false">取消</x-button>
         </div>
        </div>
      </popup>
    </div>

</div>
</template>



<script>
import { TransferDom, Divider, Card, Popup, Group, Cell, XInput, XButton } from 'vux'
import { course as courseAPI } from '@/server/getData'

export default {
  directives: {
    TransferDom
  },
  components: {
    Divider,
    Card,
    Popup,
    Group,
    Cell,
    XInput,
    XButton
  },
  data () {
    return {
      show: false,
      unable: false,
      form: {},
      courses: []
    }
  },
  created () {
    this.initData()
  },
  watch: {
    '$route' (to, from) {
      this.getCourses()
    }
  },
  methods: {
    async initData () {
      this.getCourses()
    },
    async getCourses () {
      let {success, data} = await courseAPI.fetchCourses()
      if (!success) {
        this.$vux.alert.show({ title: '错误提示', content: data[0].message })
        this.unable = false
        return false
      }
      this.courses = data
    },
    signup (course) {
      this.form.cid = course.id
      this.form.title = course.title
      this.show = true
    },
    async signupCourse () {
      this.unable = true
      let {success, data} = await courseAPI.signupCourse(this.form)
      if (!success) {
        this.$vux.alert.show({ title: '错误提示', content: data[0].message })
        this.unable = false
        return false
      }
      this.$vux.alert.show({ title: '报名提示', content: '报名成功' })
      this.show = false
    }
  }
}
</script>

<style scoped lang="less">
.card-padding {
  padding: 15px;
}
.signup{
  text-align: center;
  line-height: 30px;
}
</style>
